<template>
  <div class="page-search">
    <div class="search-div">Search for task</div>
    <slot name="search-right">
      <div class="search-right">
        <van-icon name="bars" size="24" />
      </div>
    </slot>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.page-search {
  @extend .box-b, .f-c, .a-i-c, .w;


  .search-div {
    width: 100%;
    height: 50px;
    border-radius: 15px;
    background: var(--page-search-background-color);
    color: var(--page-search-color);
    position: relative;
    @extend .w, .f-s, .a-i-c, .box-b, .f-g1;
    padding-left: 44px;

    &::before {
      content: '';
      background: url('@/assets/main/imgs/search.png');
      background-size: 16px 16px;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 16px;
      left: 22px;
    }

    &::after {
      content: '';
      background: url('@/assets/main/imgs/input-close.png');
      background-size: 16px 16px;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 16px;
      right: 22px;
    }
  }


  .search-right {
    width: 50px;
    flex-shrink: 0;
    height: 50px;
    border-radius: 16px;
    margin-left: 16px;
    color: var(--page-search-color);
    background: var(--page-search-background-color);
    @extend .f-c, .a-i-c,.u-s-n;
    // &::before {
    //   content: '•';
    //   position: absolute;
    //   left: 16px;
    //   top: 16px;
    // }
  }
}
</style>
